<template>
  <div class="job-menu-box flex-center-row-start">
    <el-page-header :content="curMenu.name" @back="goBack" style="margin-right: 10px"></el-page-header>
    <el-radio-group @change="handleMenuChange" v-model="curMenu">
      <el-radio-button :key="index" :label="item" v-for="(item,index) in menuList">
        {{item.name}}
      </el-radio-button>
    </el-radio-group>

    <YButton @click="handleShowJobForm" icon="el-icon-plus" style="margin-left: 10px">添加任务</YButton>
    <JobForm @submitJob="handleSubmitJob" @closeJobForm="showInsertForm=false" :show="showInsertForm"></JobForm>
  </div>
</template>

<script>
  import YButton from "../button/YButton";
  import JobForm from "../form/JobForm";
  import {jobApi} from "../../assets/api/jobApi";
  import {parseJob} from "../../util/jobUti";

  export default {
    name: "JobMenu",
    components: {JobForm, YButton},
    data() {
      return {
        showInsertForm: false,
        menuList: [
          {
            name: "全部任务",
            handle: jobApi.getAllJobByUserId

          },
          {
            name: "今日任务",
            handle:jobApi.getTodayJob
          },
          {
            name: "我的收藏",
            handle: jobApi.getCollectedJob

          },
          {
            name: "更多筛选",
            handle: null

          }],
        curMenu: {
          name: "全部任务",
          handle: jobApi.getAllJobByUserId
        }

      }

    },
    methods: {
      goBack() {

      },
      handleSubmitJob(){

        this.$emit("changeMenu",this.curMenu)

      },
      handleMenuChange(label) {
        this.$emit("changeMenu",label)
      },
      handleShowJobForm(args) {
        this.showInsertForm = true
      }
    }
  }
</script>

<style lang="less" scoped>
  .job-menu-box {
    width: 90%;
    height: 100%;

    flex-wrap: wrap;

    .job-menu-insert {
      height: auto;

      .job-menu-insert-text {
        margin-left: 5px;
        opacity: 0;
        transition: all 0.5s;
        color: #282727;
      }
    }

    .job-menu-insert:hover .job-menu-insert-text {
      opacity: 1;
    }


  }
</style>
